<template>
	<view class="innerWrap">
		<view class="stepItem spjj">
			<view class="stepInfo">一线老师精心制作，短小精悍、内容丰富。认真听讲、彻底掌握</view>
			<view class="stepTit">
				<view class="tit">视频讲解</view>
				<view class="titNum">01</view>
			</view>
		</view>
		<view class="stepItem dbzd">
			<view class="stepInfo">了解重点、难点、关键点、易混点</view>
			<view class="stepTit">
				<view class="tit">点拨指导</view>
				<view class="titNum">02</view>
			</view>
		</view>
		<view class="stepItem zsqd">
			<view class="stepInfo">背会定理、公理、概念、定义，抓牢基础是关键</view>
			<view class="stepTit">
				<view class="tit">知识清单</view>
				<view class="titNum">03</view>
			</view>
		</view>
		<view class="stepItem jtsf">
			<view class="stepInfo">跟着老师学习做题，掌握解题方法、学习解题思路，规范解题过程</view>
			<view class="stepTit">
				<view class="tit">解题示范</view>
				<view class="titNum">04</view>
			</view>
		</view>
		<view class="stepItem ggxl">
			<view class="stepInfo">通过习题巩固一下刚才通过视频讲解、点拨指导、知识清单、解题示范，学到的知识</view>
			<view class="stepTit">
				<view class="tit">巩固训练</view>
				<view class="titNum">05</view>
			</view>
		</view>
		<view class="stepItem spec" @tap="goStepStudy">
			开始学习
		</view>
	</view>
</template>

<script>
	export default {
		methods:{
			goStepStudy(){
				this.$emit('goStepStudy')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.innerWrap{
		height: 100%;
		padding: 0 20rpx;
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		.stepItem{
			width: 48.5%;
			height: 31.5%;
			border-radius: 15rpx;
			box-shadow: 0 0 5px rgba(0,0,0,.05);
			background: #fff;
			position: relative;
			color: #fff;
			@include respTo(phone){
				font-size: $font-size32;
			}
			@include respTo(pad){
				font-size: $padSize22;
			}
			&.spjj{
				background: $pss-color-blue;
			}
			&.dbzd{
				background:#fec812;
			}
			&.zsqd{
				background:#c7da33;
			}
			&.jtsf{
				background:#00c495;
			}
			&.ggxl{
				background:$pss-color-primary_1;
			}
			&.spec{
				display: flex;
				justify-content: center;
				align-items: center;
				color: $pss-text-color3;
				font-weight: bold;
				text-shadow: 0 10rpx 5rpx rgba(0,0,0,.1);
				@include respTo(phone){
					font-size: 46rpx;
				}
				@include respTo(pad){
					font-size: 40rpx;
				}
			}
			.stepTit{
				height: 90rpx;
				width: 100%;
				position: absolute;
				left: 0;
				bottom: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-top: 1rpx solid rgba(255,255,255,.6);
				font-weight: bold;
				.tit{
					margin-left: 15rpx;
					@include respTo(phone){
						font-size: 38rpx;
					}
					@include respTo(pad){
						font-size: 28rpx;
					}
				}
				.titNum{
					margin-right: 15rpx;
					font-style: italic;
					@include respTo(phone){
						font-size: 80rpx;
					}
					@include respTo(pad){
						font-size: 70rpx;
					}
				}
			}
			.stepInfo{
				padding: 15rpx;
			}
		}
	}
</style>